<template>
    <a-select
            showSearch
            v-model="model"
            :placeholder="placeholder"
            :defaultActiveFirstOption="false"
            :filterOption="false"
            @search="handleSearch"
            @change="handleChange"
            :notFoundContent="null"
    >
        <a-select-option v-for="option in options" :key="option.id"  :value="option.id" >{{option.name}} ({{option.phone}})</a-select-option>
    </a-select>
</template>
<script>
    import { getUserOptions} from '@/api/user';
    export default {
    name: 'UserPicker',
    data () {
      return {
//        model:undefined,
          options:[]
      }
    },
    props: {
      formData:{
        type: Object,
        required: true
      },
        field:{
            type: String|Number,
            required: true
        },
        placeholder:{
            type: String,
            default:'请选择用户'
        }
    },
    computed:{
        model:{
            get: function () {
                return this.formData[this.field];
            },
            set: function () {
            }
        }
    },
      watch: {
      },
      created(){
      },
    methods: {
        handleSearch(value){
            let that = this;
            getUserOptions({ keywords: value }).then(res => {
                that.options = res.data
            })
       },
        handleChange(value){
            this.formData[this.field] = value;
       }
    },
  }
</script>
<style>

</style>